<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="blog/header::head-fragment">
</head>

<body>
<link rel="stylesheet" th:href="@{/static/css/my.css}">
<link rel="stylesheet" th:href="@{/layui/css/layui.css}"  media="all">
<link rel="stylesheet" th:href="@{/css/my.css}">
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<!--top begin-->
  <header th:replace="blog/header::header-fragment"></header>
<style>
  .jkl{
    width: 75%;
    margin: 0 auto;
  }
</style>
<!--top end-->


  <article class="">
    <!--lbox begin-->
    <div class="jkl">

      <!--banbox begin-->

        <div class="layui-carousel" id="test1">
          <div carousel-item>
            <div><img style="height: 100%;width: 100%;margin:0;padding:0;" th:src="@{/images/banbox1.jpg}"/></div>
            <div><img style="height: 100%;width: 100%;margin:0;padding:0;" th:src="@{/images/banbox2.jpg}"/></div>
            <div><img style="height: 100%;width: 100%;margin:0;padding:0;" th:src="@{/images/banbox3.jpg}"/></div>
            <div><img style="height: 100%;width: 100%;margin:0;padding:0;" th:src="@{/images/banbox4.jpg}"/></div>
          </div>
        </div>

      <!--banbox end-->

      <br>
      <br>

      <div class="clearblank"></div>

<!--      博客推荐-->
      <div class="zhuanti whitebg">
          <h2 class="htitle">文章推荐</h2>
          <ul>
              <li th:each="recommend : ${recommend}"> <i class="ztpic">
              <a th:href="@{/blog/{id}(id=${recommend.id})}" target="_blank"><img th:src="@{${recommend.firstPicture}}"></a></i>
              <b th:text="${recommend.title}"></b><span class="wc" th:text="${recommend.context}"></span>
              <a th:href="@{blog/{id}(id=${recommend.id})}" target="_blank" class="readmore">文章阅读</a> </li>
          </ul>
      </div>

<!--      博客-->


        <div class="whitebg bloglist">
          <h2 class="htitle">最新文章<span class="hnav"><a th:href="@{/list/1}" target="_blank">More>></a></span></h2>
          <ul>
            <li th:each="blog : ${blog}">
              <hr style="color: green;">
              <a th:href="@{/blog/{id}(id=${blog.id})}" target="_blank"><h3 class="blogtitle">[[${blog.title}]]</h3></a>
              <span class="blogpic imgscale"><i><a href="/" th:text="${blog.flag}"></a></i>
              <a th:href="@{/blog/{id}(id=${blog.id})}" title=""><img  th:src="@{${blog.firstPicture}}" alt=""></a></span>
              <p class="blogtext " th:text="${blog.context}"></p>
              <p class="bloginfo">
                <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}"></span><span>【<a th:href="@{/types/{id}(id=${blog.typeId})}" th:text="${blog.type.name}" ></a>】</span></p>
              <a th:href="@{/blog/{id}(id=${blog.id})}" class="viewmore">阅读更多</a> </li>
          </ul>
        </div>
    </div>

  </article>



<script>
  layui.use('carousel', function(){
    var carousel = layui.carousel;
    //建造实例
    carousel.render({
      elem: '#test1'
      ,height:'500px'
      ,width: '100%' //设置容器宽度
      ,arrow: 'always' //始终显示箭头
      ,interval:'800'
      //,anim: 'updown' //切换动画方式
    });
  });
</script>


  <!--页脚-->
  <footer th:replace="blog/footer::footer-fragment"></footer>
    <script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js"></script>
    <script th:src="@{/blog/js/comm.js}"></script>
    <script th:src="@{/blog/js/modernizr.js}"></script>
    <script th:inline="javascript">
        $(function(){
            let typeId = $("[name='typeId']").val();
            refresh(typeId);
        });

        function refresh(typeId) {
            $(".newspic,.newslist").html("");
            $("[name='typeId']").removeClass('newscurrent');
            $("[value='" + typeId + "']").addClass('newscurrent');
            let url = '/searchType/' + typeId;
            $.ajax({
                url: url,
                type: 'post',
                success: function (data) {
                  for (let i = 0; i < data.length && i < 7; i++) {
                    if(i < 2) $(".newspic").append("<li><a href=/blog/" + data[i].id + "><img src="+data[i].firstPicture +"><span>" + data[i].title + "</span></a></li>");
                    if (i >= 2) $(".newslist").append("<li><i></i><a href=/blog/" + data[i].id + ">" + data[i].title +"</a><p>" + data[i].description + "</p>");
                  }
                }
            })
        }
    </script>
  </body>
</html>
